<template>
  <view>
    <!-- 向子组件传参 bgcolor -->
    <my-search bgcolor="#cd78c4"></my-search>
    <view class="scroll-container">
      <!-- <view style="width: 120px;"></view> -->
      <!-- 左侧分类大盒子 -->
      <scroll-view 
        scroll-y="true" 
        class="left-box"
        :style="{ height: wh + 'px'}"
      >
        <view 
          :class="['left-item', index === activeIndex ? 'active' : '' ]" 
          v-for="(item, index) in cateList" 
          :key="item.cat_id"
          @click="changeActive(index, item.children)"
        >
          {{ item.cat_name }}
        </view>  
      </scroll-view>
      
      <!-- 右侧分类大盒子 -->
      <scroll-view 
        scroll-y="true" 
        class="right-box"
        :style="{ height: wh + 'px'}"
        :scroll-top="scrollTop"
      >
        <!-- 二级分类 -->
        <view 
          class="cate-2nd"
          v-for="item2 in secondCate"
          :key="item2.cat_id"
        >
          <!-- 二级分类标题 -->
          <view class="cate-2nd-title">
            / {{ item2.cat_name }} /
          </view>
          
          <!-- 三级分类 -->
          <view class="cate-3rd-list">
            <view 
              class="cate-3rd-item"
              v-for="item3 in item2.children"
              :key="item3.cat_id" 
              @click="gotoGoodsList(item3.cat_id)"
            >
              <image :src="item3.cat_icon" mode=""></image>
              <text>{{item3.cat_name}}</text>
            </view>
          </view>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import bageMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [bageMix],
    data() {
      return {
        wh:0 ,// 设备可用高度
        cateList: [], // 一级分类列表
        activeIndex: 0, 
        secondCate: [], // 二级分类
        scrollTop: 0 // 竖向滚动条位置
      }
    },
    
    // 页面加载的生命周期函数
    onLoad() {
      // 自定义搜索组件的高度
      this.wh = uni.getSystemInfoSync().windowHeight - 50
      // 获取设备可用高度  uni.getWindowInfo().windowHeight
      this.wh = uni.getWindowInfo().windowHeight
      // console.log(uni.getWindowInfo().windowHeight)
      // 调用分类列表函数
      this.getCateList()
    },
    
    methods: {
      // 分类接口函数方法
      async getCateList() {
        const { data } = await uni.$http.get('/api/public/v1/categories')
        console.log(data)
        if (data.meta.status !== 200) {
          return uni.$showMsg()
        }
        // 赋值给一级分类
        this.cateList = data.message
        // 赋值给二级分类
        this.secondCate = data.message[0].children
      },
      
      // 点击激活时
      changeActive(index, child) {
        this.activeIndex = index
        this.secondCate = child
        this.scrollTop = this.scrollTop === 0 ? 1: 0
      },
      
      // 点击跳转到商品详情页
      gotoGoodsList(id) {
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + id
        })
      }
    }
  }
</script>

<style lang="scss">
  .scroll-container {
    display: flex;
    // 左侧一级分类
    .left-box {
      width: 120px;
      .left-item {
        line-height: 60px;
        background-color: #efefef;
        text-align: center;
        font-size: 12px;
        &.active {
          background-color: #fff;
          position: relative;
          &::before { /* 使用伪类设置小红条 */
            display: block;
            content: '';
            width: 2px;
            height: 30px;
            background-color: #c00000;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
        }
      }
    }
    
    // 右侧二级分类
    .right-box {
      .cate-2nd-title {
        font-weight: bold;
        text-align: center;
        font-size: 12px;
        padding: 15px 0;
      }
      .cate-3rd-list {
        display: flex;
        flex-wrap: wrap;
        .cate-3rd-item {
          width: 33.3%;
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            width: 50px;
            height: 50px;
          };
          text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
